import styled from 'styled-components'

export const MineStyle = styled.div`
   flex:1;
   overflow:hidden;
   width:100%;
   height:5.72rem;
   background:#f2f2f2
   
`
export const MineContainer = styled.div`
  
   width:100%;
`
export const MineContainerTop = styled.div`
 position: relative;
 width:3.75rem;
 height:1.08rem;
 padding-top:.3rem;
 padding-bottom:.15rem;
 background-image:linear-gradient(-204deg,#fd465f 0,#fc5e9f 100%);
 `
   export const MineContainerTopLogo = styled.div`
    width:.6rem;
    height:.6rem;
    background:#fff;
    border-radius:50%;
    margin:0 auto

    i{
      display:inline-block;
       font-size:.3rem;
       color:#fc5e9f;
       text-align:center;
       margin-left:.18rem;
       margin-top:.14rem;
       
      
    }
 }
 `
 export const MineContainerTopLink = styled.div`

    padding-top:.15rem;
    text-align:center;
    a{
      line-height: .25rem;
      color: #fff;
      font-weight: 900;
      font-size: .2rem;
      text-decoration: none;
      display: inline-block;
      text-align: center;
      width: .95rem
    }
    em{
      color: #fff;
    }

 }
`
export const MineContainerMid = styled.div`
.Mid-one,.Mid-two{
   background: #fff;
   margin-top: .12rem;
   .Mid-one-top{
      padding-left: .08rem;
      border-bottom: 1px solid #eaeaea;
      height: .34rem;
      line-height: .34rem;
      font-size: .13rem;
      i{
         display: inline-block;
         vertical-align: middle;
         font-size:.18rem;
         color:#666;
        
         background-size: .2rem;
         margin-right: .1rem;
      }
      .order-list{
         font-size:.13rem;
         
      }
      .look-list{
         float: right;
         text-decoration: none;
         color: #999;
         font-size:.13rem;
         margin-right: .05rem;
         .fa-angle-right{
            margin-left:.1rem;
            margin-right:.1rem;
            font-size:.16rem;
         }
      }
   }
   .Mid-one-bot{
      display:flex;
      justify-content:space-around;
      margin-top:.2rem;
     
      div{
         display:flex;
         flex-direction:column;
         align-items:center;
         font-size:.12rem;
         color:#666;
         margin-bottom:.2rem;
         i{
            font-size:.22rem;
            
         }
         span{
            display:inline-block;
            margin-top:.1rem;
         }
      }
   } 
}
.Mid-two{
   .Mid-two-top{
      padding-left: .08rem;
      border-bottom: 1px solid #eaeaea;
      height: .34rem;
      line-height: .34rem;
      font-size: .13rem;
      i{
         display: inline-block;
         vertical-align: middle;
        
         background-size: .2rem;
         margin-right: .1rem;
         margin-bottom:.04rem
         font-size:.18rem;
         color:#666;
      }
      span{
         font-size:.13rem;
      }
   }
   .Mid-two-bot{
      display:flex;
      justify-content:space-around;
      font-size:.13rem;
      color:#666
      margin: 0;
      padding: .15rem 0;
     
      }
}
`
export const MineContainerFooter = styled.div`
   margin-top:.15rem
   .bot-top{
      background:#fff
      div{
         border-bottom:1px solid #eaeaea;
         padding-left:.08rem;
         font-size:.15rem;
         height:.34rem;
         line-height:.34rem;
         color:#333;
         i{
            margin-right:.1rem;
            font-size:.2rem;
         }
         em{
            float:right;
            margin-right:.1rem;
            line-height:.35rem;
            font-size:.22rem
         }
      }
   },
   .bot-bot{
      font-size:.11rem;
      padding:0 0 .49rem;
      color:#999;
      .bot-title{
         margin:.15rem;
        }
   }
`
//登录后的mine
export const MineLoginTopHead = styled.div`
overflow: hidden;
`
export const MineLoginTopContainer = styled.div`
   color:#fff;
   font-size: .13rem;
    position: absolute;
    left:1.7rem;
    top:.4rem
   
`
export const MineLoginName = styled.span`
display: block;
font-family: sans-serif;
line-height: .20rem;
font-size:.16rem;
letter-spacing: .0065rem;

`
export const MineLoginGrade = styled.div`
background: rgba(255,255,255,.2);
border-radius: 1rem;
letter-spacing: .0065rem;
line-height: .18rem;
padding: .03rem .05rem;
text-align:center;
span{
   font-size:.14rem;
}
`
export const MineLoginTopFooter = styled.ul`
   position: absolute;
   top:0.94rem;
  
   width:100%;
   height:.6rem;
   display:flex;
   flex-direction:row;
   background:#fff;
   justify-content:flex-end
  li{
      display:flex;
     a{
         width:.76rem;
         height:.5rem;
         display:flex;
         color:#666;
         flex-direction:column;
         align-items:center;
        
         i{
            margin .05rem .29rem;
            font-size:.22rem;
         }
         span{
            font-size:.12rem;
         }
     }
  }
   
`
export const MineLoginPhoto = styled.div`
  width:.8rem;
  height:.8rem;
  border-radius:50%;
  position: absolute;
  top:.5rem;
  left:.5rem;
  z-index:10;
  img{
     width:100%;
     height:100%;
     border-radius:50%;
  }
`